<template>
<div class="login">
  <mk-content>
    <div class="box">
      <ul>
        <h2 style="padding: 10px 0;font-weight: normal">使用爱美刻，在线制作专业视频</h2>
        <li>· 无需专业知识，5分钟上手，快速出片</li>
        <li>· 众多设计专业的模板，满足各类需求</li>
        <li>· 蓝光超清成片，支持投影仪、LED大屏播放</li>
        <li>· 支持一键分享微信朋友圈</li>
      </ul>
      <div class="loginbox">
        <el-card class="login-card">
          <template v-slot:header>
            <h1 style="text-align: right;padding: 6px 0">{{ type===1?'注 册':'登 录' }}</h1>
          </template>
          <div class="disanfang">
            <div>
              <a :href="wxloginurl">微信</a>
<!--              <svg t="1626187739800" class="icon" viewBox="0 0 1137 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2412" width="32" height="32"><path d="M1137.777778 649.784889c0-157.582222-157.582222-285.980444-334.961778-285.980445-187.847111 0-335.416889 128.341333-335.416889 285.980445 0 158.094222 147.569778 286.037333 335.416889 286.037333 39.253333 0 79.075556-10.069333 118.328889-19.626666l108.259555 59.335111-29.582222-98.645334C1078.784 817.493333 1137.777778 738.474667 1137.777778 649.784889z m-443.733334-49.322667c-19.626667 0-39.253333-19.626667-39.253333-39.310222 0-19.569778 19.626667-39.253333 39.253333-39.253333 29.696 0 49.379556 19.683556 49.379556 39.253333 0 19.683556-19.683556 39.310222-49.379556 39.310222z m217.088 0c-19.626667 0-39.253333-19.626667-39.253333-39.310222 0-19.569778 19.626667-39.253333 39.253333-39.253333 29.696 0 49.322667 19.683556 49.322667 39.253333 0 19.683556-20.138667 39.310222-49.322667 39.310222zM770.275556 328.931556c12.913778 0 25.884444 0.910222 38.798222 2.275555-34.759111-162.417778-208.213333-282.737778-406.300445-282.737778C181.475556 48.412444 0 199.111111 0 390.883556c0 110.592 60.245333 201.557333 160.995556 272.042666l-40.106667 121.287111 140.913778-70.883555c50.403556 9.784889 91.022222 20.081778 140.970666 20.081778 12.458667 0 25.031111-0.455111 37.489778-1.706667a294.115556 294.115556 0 0 1-12.515555-84.366222c0-175.786667 151.210667-318.464 342.528-318.464z m-216.746667-109.226667c30.264889 0 50.346667 20.024889 50.346667 50.346667s-20.081778 50.403556-50.403556 50.403555-60.643556-20.081778-60.643556-50.403555c0.455111-30.321778 30.72-50.403556 60.643556-50.403556z m-281.884445 100.693333c-30.378667 0-60.643556-20.024889-60.643555-50.346666 0-30.378667 30.321778-50.403556 60.643555-50.403556s50.403556 20.081778 50.403556 50.403556c0 29.866667-20.081778 50.346667-50.403556 50.346666z" fill="#09BB07" p-id="2413"></path></svg>-->
            </div>
            <div>
              <a href="">QQ</a>

              <!--              <svg t="1626187793536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3242" width="32" height="32"><path d="M164.032 390.848c-5.056 13.44 2.304 21.952 0 73.152-0.64 13.824-59.328 76.16-82.624 140.928-23.04 64.192-26.24 131.328 9.408 157.696s68.864-87.808 73.216-71.168c1.92 7.232 4.224 14.72 7.04 22.528 11.456 31.104 30.656 65.536 58.432 97.728 5.632 6.592-34.368 18.56-58.368 59.904-24 41.28 6.848 116.416 126.144 116.416 153.984 0 188.416-54.848 191.552-54.528 11.456 0.832 12.224 0 24.448 0 14.784 0 8.64 1.216 22.528 0 7.424-0.704 82.24 65.536 185.856 54.528 176.512-18.816 149.504-78.656 135.68-116.416-14.464-39.424-65.6-57.92-63.36-60.48 42.24-47.232 49.024-76.288 63.36-119.68 5.888-17.856 46.848 98.176 78.336 71.168 13.12-11.264 39.424-58.24 13.12-157.696-26.24-99.52-77.056-122.24-75.968-140.928 2.304-38.848 0.96-66.048-0.96-73.152-9.408-34.176-28.992-26.624-28.992-34.176C842.88 159.744 696.448 0 515.84 0S188.992 159.744 188.992 356.672c0 15.616-13.696 4.032-24.96 34.176" p-id="3243"></path></svg>-->
            </div>
            <div>
              <a href="">微博</a>

              <!--              <svg t="1626187827891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4114" width="32" height="32"><path d="M708.486 504.839c-12.986-1.214-24.758-8.374-16.142-23.18s24.515-57.89-6.068-88.231c-30.583-30.462-97.454-18.932-144.786 0.729-47.21 19.661-44.661 5.947-43.205-7.524 1.578-14.199 27.065-93.571-50.851-103.158-102.066-12.5-233.017 113.838-279.257 186.656-69.905 109.955-58.861 184.351-58.861 184.351h0.485c8.374 102.673 159.593 184.471 344.914 184.471 159.349 0 293.578-60.56 333.263-142.845 0 0 0.122-0.364 0.485-0.971 4.127-8.86 7.282-17.84 9.223-27.185 5.583-22.087 9.83-54.128-0.607-85.682-18.569-55.827-75.609-76.217-88.595-77.429zM431.779 794.047c-131.922 0-238.964-70.876-238.964-158.257s106.921-158.257 238.964-158.257c131.922 0 238.964 70.876 238.964 158.257 0 87.503-107.042 158.257-238.964 158.257z m324.889-350.738c2.427 1.092 4.976 1.578 7.524 1.578 7.524 0 14.806-4.491 17.84-11.893 4.976-11.773 7.524-24.272 7.524-37.259 0-52.671-42.841-95.513-95.513-95.513a94.911 94.911 0 0 0-37.137 7.524c-9.83 4.127-14.442 15.534-10.316 25.486 4.127 9.83 15.534 14.442 25.486 10.316 7.039-2.913 14.442-4.491 22.087-4.491 31.312 0 56.676 25.486 56.676 56.676 0 7.646-1.456 15.05-4.491 22.087-4.247 9.952 0.364 21.36 10.316 25.486z" p-id="4115"></path><path d="M692.953 181.043c-21.724 0-43.205 3.155-63.837 9.223-15.413 4.611-24.151 20.753-19.661 36.166 4.611 15.413 20.753 24.151 36.166 19.661a167.767 167.767 0 0 1 47.331-6.796c91.387 0 165.782 74.396 165.782 165.782 0 16.384-2.427 32.646-7.039 48.181-4.611 15.413 4.005 31.676 19.419 36.287 2.791 0.85 5.703 1.214 8.496 1.214 12.5 0 24.03-8.131 27.914-20.631 6.311-20.995 9.588-42.841 9.588-65.051-0.122-123.548-100.61-224.036-224.157-224.036zM409.691 535.301c-70.39 0-127.431 49.881-127.431 111.533s57.04 111.533 127.431 111.533 127.431-49.881 127.431-111.533-57.04-111.533-127.431-111.533z m-41.628 183.988c-24.637 0-44.661-20.025-44.661-44.661s20.025-44.661 44.661-44.661c24.637 0 44.661 20.025 44.661 44.661 0 24.637-20.025 44.661-44.661 44.661z m83.499-80.464c-5.34 9.345-16.142 13.229-24.03 8.617-7.888-4.491-9.83-15.777-4.491-25.122 5.34-9.345 16.142-13.229 24.03-8.617 7.888 4.611 9.83 15.899 4.491 25.122z" p-id="4116"></path></svg>-->
            </div>
          </div>
          <p>
            <span @click="type = 1" v-if="type===0">注册</span>
            <span @click="type = 0" v-else>登录</span>
             或使用手机号{{ type===1?'注册':'登录' }}
          </p>

          <el-form :model="user" v-if="type===0">
            <el-form-item>
              <el-input v-model="user.username" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="user.password" placeholder="请输入密码" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login" style="width: 100%">登 录</el-button>
            </el-form-item>
          </el-form>

          <el-form v-if="type===1">
            <el-form-item>
              <el-input placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
            <el-row type="flex" justify="space-between">
              <el-col :span="14">
                <el-input placeholder="请输入验证码" show-password type="password"></el-input>
              </el-col>
              <el-row :span="8">
                <el-button @click="sendCode" :disabled="btn!=='获取验证码'" type="primary" plain>{{btn}}</el-button>
              </el-row>
            </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  style="width: 100%">注 册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </mk-content>
</div>
</template>

<script>
// import axios from 'axios'
import { userLogin } from "../api/user";

export default {
  name: "Login",
  data(){
    return{
      type:0,
      btn:'获取验证码',
      user:{
        username:'',
        password:''
      }
    }
  },
  watch:{
    $route:{
      handler(){
        console.log(this.$route.query)
        this.type = parseInt(this.$route.query) || 0
      },
      immediate:true
    }
  },
  computed:{
    wxloginurl(){
      return `https://open.weixin.qq.com/connect/qrconnect?appid=wxff4ce6b5b99fb2de&redirect_uri=http://msmk.aliyunhg.com&response_type=code&scope=snsapi_login`
    }
  },
  methods:{
    sendCode(){
      console.log(123)
      this.btn = '过59s后重试'
      let s = 59
      let timer =  setInterval(()=>{
        this.btn = `过${this.zero(--s)}S后重试`
      },1000)
      setTimeout(()=>{
        clearInterval(timer)
        this.btn = '获取验证码'
      },59*1000)
    },
    zero(n){
      return n>9?n:`0${n}`
    },
    async login(){
      // const res = await userLogin(this.user)
      // console.log(res)
      this.$router.push('/app/video')
      // axios.post('https://sm.hfbdqn.cn/manage/login2',this.user).then(res=>{
      //   console.log(res)
      // })
      // axios({
      //   url:'',
      //   method:'post',
      //   data:{},
      //   headers:{}
      // }).then()
    }
  }
}
</script>

<style scoped>
.login{
  height: calc(100vh - 60px);
  width: 100%;
  background-image: url('https://static.aimeike.tv/assets/img/login/login-bg.jpg');
  background-size: cover;
}
.box{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 10vh;
}
ul{
  color: white;
  font-size: 18px;
  line-height: 38px;
  flex-direction: column;
  text-align: left;
}
li{
  width: 350px;
}
ul,.loginbox{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card{
  width: 60%;
}
.disanfang{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 10px;
}
p{
  text-align: center;
}
/*.disanfang div:nth-of-type(1){*/

/*}*/
span{
  color: #5c0eda;
  cursor: pointer;
}
@media screen and (max-width: 1400px){
  .login-card{
    width: 70%;
  }
}
@media screen and (max-width: 1200px){
  .login-card{
    width: 90%;
  }
}
@media screen and (max-width: 800px){
  .box{
    flex-direction: column-reverse;
  }
  .loginbox{
    width: 80%;
  }
  .login-card{
    width: 100%;
  }
}
</style>
